<template>
  <view class="pc-register-bg">
    <view class="register-box">
      <view class="register-title-row">
        <text class="register-title">用户注册</text>
        <view class="register-link">
          <text>已有账号？</text>
          <text class="to-login" @click="goLogin">去登录&gt;&gt;</text>
        </view>
      </view>
      <view class="register-form">
        <view class="form-item">
          <text class="form-label">账号（手机号）</text>
          <view class="input-wrap white-bg">
            <uni-icons type="phone" size="26" color="#409eff" />
            <input v-model="form.username" maxlength="11" placeholder="请输入手机号" class="input" />
          </view>
        </view>
        <view class="form-item">
          <text class="form-label">密码</text>
          <view class="input-wrap white-bg">
            <uni-icons type="locked" size="26" color="#409eff" />
            <input v-model="form.password" type="password" placeholder="请输入密码" class="input" />
          </view>
        </view>
        <view class="form-item">
          <text class="form-label">确认密码</text>
          <view class="input-wrap white-bg">
            <uni-icons type="locked" size="26" color="#409eff" />
            <input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" class="input" />
          </view>
        </view>
        <button class="register-btn" @click="onRegister">注册</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { go } from '@/utils/nav.js';
import { addUser } from '@/api/pc/elderly';
const form = ref({ username: '', password: '', confirmPassword: '' });

// 每次进入页面都重置表单，防止旧数据残留
onMounted(() => {
  form.value = { username: '', password: '', confirmPassword: '' };
});

async function onRegister() {
  // 表单校验
  if (!form.value.username) {
    uni.showToast({ title: '请输入账号（手机号）', icon: 'none' });
    return;
  }
  if (!/^\d{11}$/.test(form.value.username)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }
  if (!form.value.password) {
    uni.showToast({ title: '请输入密码', icon: 'none' });
    return;
  }
  if (form.value.password.length < 6) {
    uni.showToast({ title: '密码长度不能少于6位', icon: 'none' });
    return;
  }
  if (!form.value.confirmPassword) {
    uni.showToast({ title: '请确认密码', icon: 'none' });
    return;
  }
  if (form.value.password !== form.value.confirmPassword) {
    uni.showToast({ title: '两次密码不一致', icon: 'none' });
    return;
  }
  try {
    const res = await addUser(form.value.username, form.value.password);
    if (res.code === 200) {
      uni.showToast({ title: '注册成功', icon: 'success' });
  go('/pages/pc/login', { replace: true });
    } else {
      uni.showToast({ title: res.msg || '注册失败', icon: 'none' });
    }
  } catch (e) {
    // 优化错误提示，优先显示后端 msg
    const msg = (e && e.msg) ? e.msg : (typeof e === 'string' ? e : '网络错误，请重试');
    uni.showToast({ title: msg, icon: 'none' });
    console.error('注册异常', e);
  }
}
const goLogin = () => {
  go('/pages/pc/login');
};
</script>

<style scoped>
.pc-register-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #eaf6ff 0%, #f8fafd 20%, #fdf6f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.register-box {
  padding: 72px 64px 56px 64px;
  width: 520px;
  min-width: 340px;
  background: transparent;
}
.register-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 28px;
}
.register-title {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
.register-link {
  font-size: 17px;
  color: #888;
}
.to-login {
  color: #1976ed;
  margin-left: 8px;
  cursor: pointer;
}
.register-form {
  margin-top: 18px;
}
.form-item {
  margin-bottom: 28px;
}
.form-label {
  font-size: 18px;
  color: #222;
  margin-bottom: 10px;
  display: block;
}
.input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #e3e7ed;
  border-radius: 8px;
  padding: 0 16px;
  height: 52px;
  font-size: 18px;
  background: #f7f8fa;
  transition: box-shadow 0.2s;
}
.input-wrap.white-bg {
  background: #fff;
}
.input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 18px;
  margin-left: 10px;
  outline: none;
}
.register-btn {
  width: 100%;
  height: 52px;
  background: linear-gradient(90deg, #1976ed 0%, #2386f8 100%);
  color: #fff;
  font-size: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px #e3e7ed;
  margin-top: 12px;
}
</style>
